<template>
	<view class="content">
		<button open-type="share" class="shareView"></button>
		<view class="showMoneyDesc" @click="distributionShowImg"></view>
		<view class="body" :style="bodyStyle">
			<view class="distributionInfo">
				<view class="flex userGetPrice">
					<view class="infoBorder">
						<view class="price">{{userMoney.lock_money}}元</view>
						<view>在路上</view>
					</view>
					<view class="infoBorder">
						<view class="price">{{userMoney.history_money}}元</view>
						<view>已获得</view>
					</view>
					<view class="infoBorder overCash">
						<view class="price">{{userMoney.history_money-userMoney.money}}元</view>
						<view>已提现</view>
					</view>
				</view>
				<view class="distributionShow" @click="distributionInfo">
					进度明细
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/apis/http.js'
	import base from '@/config/base.js'
	export default {
		data() {
			return {
				bodyStyle : 'background: url('+base.baseUrl+'uploads/20230529/63aac7465b32a590f3e8a7ed5b1ac403.jpg) no-repeat 100%/100%;',
				userMoney:{},
			}
		},
		methods: {
			distributionInfo(){
				uni.reLaunch({
					url:'/pages/distribution/distributionInfo'
				})
			},
			getUserMoney(){
				http.POST('user/getUserMoney').then(res=>{
					this.userMoney=res.data
				})
			},
			distributionShowImg(){
				uni.navigateTo({
					url:'/pages/distribution/distributionShowImg'
				})
			}
			
		},
		onLoad() {
			this.getUserMoney()
		}
	}
</script>

<style>
	.flex { display: flex;}
	.body {
		height: 1600rpx;
	}
	.shareView {
		position: absolute;
		top: 500rpx;
		height: 500rpx;
		background-color: transparent;
		left: 0;
		width: 100%;
	}
	button::after {
	  border: none;
	  
	}
	.showMoneyDesc {
		position: absolute;
		width: 100%;
		top: 1100rpx;
	
		height: 50rpx;
	}
	.distributionInfo {
		position:absolute;
		width: 660rpx;
		top:1300rpx;
		left: calc(50% - 330rpx);
		justify-content: center;
	}
	.userGetPrice {
		width: 100%;
		justify-content: space-evenly;
		text-align: center;
		margin-bottom: 30rpx;

		
	}
	.infoBorder {
		padding: 10rpx 30rpx ;
		border-right: 1px solid #eee;

	}
	.overCash { border-right: none;}
	.distributionShow {
		color: #f8516b;
		width: 300rpx;
		padding: 10rpx 0;
		border: 1px solid #f8516b;
		border-radius: 50rpx;
		text-align: center;
		margin: 0 auto;
	}
	.price {		color: #6ec3ac;}
</style>
